{extend name="base" /}
{block name="title"}
<title>城市列表</title>
<style type="text/css">
    body, html, select, option {
        font-family: '微软雅黑';
    }
    select {
        width: 100px;
    }
</style>
{/block}
{block name="content"}

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>城市列表 </legend> <br>
    <a href="{:url('admin/region/add')}" class="layui-btn" target="">添加城市</a>
    <a href="{:url('admin/region/index')}" class="layui-btn layui-btn-normal" target="">城市列表</a>
</fieldset>

<table class="layui-table">
    <colgroup>
        <col width="50">
        <col width="88">
    </colgroup>
    <thead>
    <tr>
        <th>名称</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr style="display: none;">
        <th>区域列表</th>
        <td>
            <select name="provinceid">
                <option value="">请选择</option>
                {foreach name="province" item="v"}
                <option value="{$v.id}">{$v.name}</option>
                {/foreach}
            </select>
            <select name="cityid">
                <option value="0">请选择</option>
                <option value="120100">天津市</option>
            </select>
            <select name="countyid">
                <option value="0">请选择</option>
            </select>
        </td>
    </tr>
    {foreach name="list" item="v"}
    <tr>
        <td>{$v.html}{$v.name}</td>
        <td>
            <a href="{:url('admin/region/edit', ['id' => $v.id])}" class="layui-btn layui-btn-small layui-btn-normal" title="修改"><i class="layui-icon"></i>修改</a>
            <a class="layui-btn layui-btn-small layui-btn-danger" onclick="deleteAction('{$v.id}')"><i class="layui-icon"></i>删除</a>
        </td>
    </tr>
    {/foreach}
    </tbody>
</table>

{/block}

{block name="js"}
<script type="text/javascript" src="__PUBLIC__/admin/js/jquery.min.js"></script>
<script>
    layui.use(['layer'], function () {

    });

    $(function () {
        $("[name='provinceid']").change(function () {
            $("[name='cityid']").html('<option>loading……</option>');
            var current_province_id = $(this).val();

            $.ajax({
                url: "{:url('region/getCity')}",
                data: {ParentId: current_province_id},
                dataType: 'json',
                type: 'post',
                success: function (item) {
                    var html = '<option value="0">请选择</option>';
                    //var item = re.data;
                    for (var i in item) {
                        html += '<option value="' + item[i]['id'] + '" >' + item[i]['name'] + '</option>';
                    }
                    $("[name='cityid']").html(html);
                }
            })
        })
        $("[name='cityid']").change(function () {
            $("[name='countyid']").html('<option>loading……</option>');
            var current_city = $(this).val();
            $.ajax({
                url: "{:url('region/getCounty')}",
                data: {ParentId: current_city},
                dataType: 'json',
                type: 'post',
                success: function (item) {
                    var html = '<option value="0">请选择</option>';
                    //var item = re.data;
                    for (var i in item) {
                        html += '<option value="' + item[i]['id'] + '" >' + item[i]['name'] + '</option>';
                    }
                    $("[name='countyid']").html(html);
                }
            })
        })

    });

    function deleteAction(id) {
        //询问框
        layer.confirm('您确定要删除这个城市吗？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            //发送post请求
            $.post("{:url('admin/region/delete')}", {_method:'DELETE','_token':'csrf_token',id:id}, function (data) {
                if(data.errno) {
                    layer.msg(data.msg, {icon: 2});
                }else {
                    layer.msg('删除成功', {icon: 1});
                    location.href=location.href;
                }
            },'json');
        }, function(){
            //layer.msg('11', {icon: 2});
        });
    }
</script>
{/block}